<template>
  <div class="Sidebar opacity-ling">
    <!-- <el-radio-group
      v-model="isCollapse"
      style="margin-bottom: 20px;"
    >
      <el-radio-button :label="false">展开</el-radio-button>
      <el-radio-button :label="true">收起</el-radio-button>
    </el-radio-group> -->
    <el-menu
      :default-active="onRoutes"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleOpen"
      text-color="#bfcbd9"
      active-text-color="#20a0ff"
    >
      <template v-for="item in tabList">
        <el-submenu
          :index="item.index"
          :key="item.index"
        >
          <template slot="title">
            <i
              :class="item.icon"
              v-if="item.icon"
            ></i>
            <svg
              v-else
              class="svg-icon svg-stype"
              aria-hidden="true"
            >
              <use v-bind:xlink:href="item.svg_icon"></use>
            </svg>
            <span
              class="item-title"
              slot="title"
            >{{item.title}}</span>
          </template>
          <template v-for="items in item.taber">
            <el-menu-item-group :key="items.index">
              <span
                class="items-span"
                slot="title"
              >{{items.title}}</span>
            </el-menu-item-group>
          </template>
        </el-submenu>
      </template>
    </el-menu>
  </div>
</template>

<script>
export default {
  name:'Sidebar',
  data () {
    return {
      tabList: [
        {
          svg_icon: '#icon-wenzhang',
          index: '',
          title: '博客模块',
          taber: [
            {
              title: '啥也没有'
            },
            {
              title: '啥也没有'
            },
            {
              title: '啥也没有'
            },
            {
              title: '啥也没有'
            },
          ]
        },
        {
          svg_icon: '#icon-wangpan',
          index: '/NetworkDisk',
          title: '网盘模块',
        },
        {
          svg_icon: '#icon-yinle',
          index: '/MuSic',
          title: '音乐模块',
        },
      ],
      default_active_index: 0,
    };
  },
  computed: {
    onRoutes () {
      return this.$route.path.replace('/', '');
    }
  },
  methods: {
    handleOpen (key, keyPath) { 
      this.$emit('tabsOpen', {key,keyPath})
    },
     // console.log(key, keyPath);
      // console.log(key, keyPath);
    handleClose (key, keyPath) {
     
    }
  }
}
</script>

<style lang="scss" scoped>
.Sidebar::-webkit-scrollbar {
  width: 0;
}
.Sidebar {
  position: relative;
  display: block;
  width: 250px;
  height: calc(100vh - 3.6rem);
  overflow-y: scroll;

  .svg-stype {
    font-size: 32px;
    margin-right: 10px;
  }

  .item-title {
    font-size: 1.4em;
    color: #2c3e50;
    font-weight: 700;
  }
  ul {
    height: 100%;
  }

  .items-span {
    font-size: 1.4em;
    color: #2c3e50;
    margin-left: 60px;
    font-weight: 700;
  }
}

.Sidebar ::v-deep .el-submenu__title {
  height: 72px;
  line-height: 68px;
  margin-top: 1.5rem;
}
</style>